<template>
	<view>
		<view class="swiper-wrap">
			<u-swiper :list="banners" @change="changeSwiper" 
				keyName="imgPath" :autoplay="false"
				radius="11"
				height="200"
				imgMode=""
				@click="imgClick"
				>
				<view slot="indicator" class="indicator">
					<view class="indicator__dot"
						v-for="(item, index) in banners"
						:key="index"
						:class="[index === current ? 'indicator__dot--active':'']">
					</view>
				</view>
			</u-swiper>	
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			banners:{
				type:Array,
				default:[]
			}
			
		},
		name:"index-swiper",
		data() {
			return {
				current:0
			};
		},
		methods:{
			changeSwiper(e){
				this.current=e.current
			},
			imgClick(e){
				uni.$u.route('subpkg/webBanner/webBanner',{pathURL:this.banners[e].url});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-wrap{
		.indicator {
		        @include flex(row);
		        justify-content: center;
		
		        &__dot {
		             height: 6px;
		             width: 6px;
		             border-radius: 100px;
		             background-color: rgb(255, 255, 255);
		             margin: 0 5px;
		             //transition: background-color 0.3s;
		    
		            &--active {
		                 background-color: #ffaa22;
						 width: 16px;
		             }
		        }
		    }
	}

</style>